<%@ page language="java" pageEncoding="UTF-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		<!DOCTYPE html>
		<html>

		<head>
			<base href="${context}/" />
			<title>后台管理</title>
			<meta charset="utf-8" />
			<base href="${pageContext.request.contextPath}/">
			<link rel="stylesheet" href="css/admin.css" />
			<script src="../js/jquery-3.6.0.js"></script>
            <script src="../js/jquery-form.js" type="text/javascript"></script>
            <script src="../js/template.js"></script>
            <script src="/layer/layer.js"></script>
		</head>

		<body>
			<div class="container">
				<div id="header">
					<jsp:include page="header.jsp"></jsp:include>
				</div>
				<div id="admin_left">
					<ul class="submenu">
						<jsp:include page="left.jsp"></jsp:include>
					</ul>
					<div id="copyright"></div>
				</div>

				<div id="admin_right">
					<div style="height: 640px;">
						<div class="headbar">
							<div class="searchbar">
								<form action="admin/user" method="get" id="searchFrom">
									<input type="hidden" name="opr" value="initUser" />
									<input type="hidden" name="p" id="p" value="1" />
									<input type="hidden" name="pSize" id="pSize" value="5" />
									<select class="auto" name="state" id="state">
										<option value="0">请选择</option>
										<option value="1">正常</option>
										<option value="-1">已禁用</option>
										<option value="2">已删除</option>
									</select>
									用户名： <input class="small" name="name" id="name" type="text"
										value="${seachUser.username}">
									注册时间：<input class="small" name="startTime" id="name" type="date"
										value="${seachUser.startTime}">
									至：<input class="small" name="endTime" id="name" type="date"
										value="${seachUser.endTime}">

									<button class="btn" type="submit">
										<span class="sel">筛 选</span>
									</button>
								</form>
							</div>

							<div class="field">
								<table class="list_table" align="center">
									<col width="40px" />
									<col width="50px" />
									<col width="50px" />

									<col width="50px" />
									<col width="50px" />
									<col width="50px" />
									<col width="50px" />

									<col width="70px" />
									<thead>
										<tr>
											<th>选择</th>
											<th>用户名</th>
											<th>用户头像</th>

											<th>邮箱</th>
											<th>注册时间</th>
											<th>状态</th>
											<th>积分</th>

											<th>操作</th>
										</tr>
									</thead>
								</table>
							</div>
						</div>
						<form action="" method="post" name="orderForm" align="center">
							<div class="content">
								<table class="list_table">
									<col width="40px" />
									<col width="50px" />
									<col width="50px" />
									<col width="50px" />
									<col width="50px" />
									<col width="50px" />
									<col width="50px" />
									<col width="70px" />
									<tbody>
										<c:forEach items="${pageBean.data}" var="users">
											<c:if test="${users.state==1}">
												<tr onMouseOver="this.style.backgroundColor='#E0FFFF'"
													onMouseOut="this.style.backgroundColor='#FFFFFF'">
											</c:if>
											<c:if test="${users.state==-1}">
												<tr onMouseOver="this.style.backgroundColor='#FAFAD2'"
													onMouseOut="this.style.backgroundColor='#FFFFFF'">
											</c:if>
											<c:if test="${users.state==2}">
												<tr style="opacity: 0.5;"
													onMouseOver="this.style.backgroundColor='#FFDAB9'"
													onMouseOut="this.style.backgroundColor='#FFFFFF'">
											</c:if>

											<td><input name="" type="checkbox" value="1" /></td>
											<td>

												<a href="javascript:void(0)" id="updateUserName" data-uid="${users.id}">
													<c:if test="${users.state==2}">
														<del>
													</c:if>
													${users.username}</del>
												</a>
											</td>
											<td>
												<img src="${users.img}" alt="${users.username}"
													title="${users.username}"
													style="height: 48px;width: 48px;padding: 3px;display: block;border-radius: 50%;">
											</td>

											<td>${users.email}</td>
											<td>${users.regTime}</td>
											<td>
												<c:if test="${users.state==1}">正常</c:if>
												<c:if test="${users.state==-1}">已禁用</c:if>
												<c:if test="${users.state==2}">已删除</c:if>
											</td>
											<td>${users.integral}</td>

											<td><a href="javascript:void(0)"><img class="operator"
														data-uid="${users.id}" src="images/admin/bj.png" alt="编辑"
														title="编辑" id="updateUser"
														onmouseover="this.style.width='18px',this.style.height='18px'"
														onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>

												<c:if test="${users.state==1}">
													<a href="javascript:void(0)"><img class="operator"
															src="images/admin/sc.png" alt="删除" id="delID" title="删除"
															data-uid="${users.id}"
															onmouseover="this.style.width='18px',this.style.height='18px'"
															onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
												</c:if>

												<c:if test="${users.state==2}">
													<a href="javascript:void(0)"><img class="operator"
															src="images/admin/hf.png" alt="删除" id="hfID" title="恢复"
															data-uid="${users.id}"
															onmouseover="this.style.width='18px',this.style.height='18px'"
															onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
												</c:if>

												<c:if test="${users.state==1}">
													<a href="javascript:void(0)"><img class="operator"
															src="images/admin/jy1.png" alt="禁用" id="shieldID" title="禁用"
															data-uid="${users.id}"
															onmouseover="this.style.width='18px',this.style.height='18px'"
															onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
												</c:if>

												<c:if test="${users.state==-1}">
													<a href="javascript:void(0)"><img class="operator"
															src="images/admin/hy.png" alt="还原" id="repShieldID"
															title="还原" data-uid="${users.id}"
															onmouseover="this.style.width='18px',this.style.height='18px'"
															onMouseOut="this.style.width='13px',this.style.height='13px'" /></a>
												</c:if>
											</td>
											</tr>

										</c:forEach>
									</tbody>
								</table>
							</div>
						</form>
						<form>
							<select class="auto" name="pageSize" id="usersize"
								style="float: right;margin-right: 50px; margin-top: 10px"
								onchange="goPageSize(this.value)">
								<c:forEach begin="5" end="30" var="pSize" step="5">
									<option value="${pSize}">${pSize}</option>
								</c:forEach>

							</select>
							<span
								style="float: right;margin-right: 10px;padding-top: 5px;margin-top: 10px;color: rgb(148, 152, 152);">
								页面数据:${pageBean.currPageSize} 条</span>
						</form>
						<div class='pages_bar'>
							<a href='javascript:goPage(1)' id="first">首页</a>
							<a href="javascript:if(${pageBean.currPage==1}){goPage(1)}else{goPage(${pageBean.currPage-1})}"
								id="prev">上一页</a>
							<c:forEach begin="1" end="${pageBean.totalPages}" var="p">
								<a href="javascript:goPage(${p})">${p}</a>
							</c:forEach>
							<a href="javascript:if (${ pageBean.currPage == pageBean.totalPages }) {goPage(${ pageBean.totalPages}) }else { goPage(${ pageBean.currPage + 1 })}"
								id="next">下一页</a>
							<a href='javascript:goPage(${pageBean.totalPages})' id="last">尾页</a>
							<select onchange="goPage(this.value)" id="pselect">
								<c:forEach begin="1" end="${pageBean.totalPages}" var="p">
									<option value="${p}">${p}</option>
								</c:forEach>
							</select>
							<span>当前第${pageBean.currPage}页/共${pageBean.totalPages}页</span>
						</div>
						<!-- 弹窗代码开始  -->
						<div class="web_notice" id="msgdiv"
							style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;text-align: left;">
							<div id="msg"
								style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
								<form action="admin/user?opr=update" method="post" id="updateSubmit">
									<h3 style="font-weight: bold;text-align: center;font-size: 30px;margin-top: -20px;">

										<span id="msgs">修改用户信息</span>

									</h3>
									<div style="font-size: 16px;">
										<input type="hidden" id="uid" name="uid" value="1">
										<span>用户 &nbsp;&nbsp;名：</span> <input type="text" value="用户名"
											style="margin-top: 20px;padding: 5px;" id="upusername" name="account"
											disabled><br>

										<span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</span><input type="text"
											name="email" value="252525@qq.com" style="margin-top: 20px;padding: 5px;"
											id="upemail"><span id="msgemail">*</span> <br>
										<span>注册时间：</span><input type="date" valueAsDate="2022-06-21 11:44:05"
											style="margin-top: 20px;" id="uptime" name="times"><br>
										<span>状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态：</span>
										<input type="radio" name="state" class="state" id="upok" style="margin-top: 20px;" value="1">
										<label for="upok">正常</label>
										<input type="radio" name="state" class="state" id="updisable" value="-1"> <label
											for="updisable">禁用</label>
										<input type="radio" name="state" class="state" id="upnoactive" value="3"> <label
											for="upnoactive">未激活</label>
										<input type="radio" name="state" class="state" id="updel" value="2"> <label
											for="updel">已删除</label><br>
										<span>剩余积分：</span><input type="text" value="0"
											style="margin-top: 20px;padding: 5px;" id="upinteger" name="integer">
										<img src="" title="用户头像" id="upimg"
											style="height: 158px;width: 158px;padding: 3px;display: block;border-radius: 50%;float: right;margin-top: -135px;">
									</div>

									<div
										style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
										<a href="javascript:void(0)" onclick="updateFromSubmit()"
											style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 80px;margin-top: 60px;border-radius: 32px;width: 20%;">确定</a>
										<a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin-left: 340px;margin-top: -60px;border-radius: 32px;width: 20%;cursor: pointer;"
											onclick="nomsgDiv()">取消</a>
									</div>
								</form>
							</div>
						</div>
						<!-- 弹窗代码结束  -->
					</div>
					<div id="separator"></div>
				</div>
		</body>
		<script>
			window.addEventListener("load", function () {
				document.getElementById("admin_right").addEventListener("click", function (e) {
					if (e.target.id === "delID") {
						layer.confirm("确认删除吗？", function () {
							location.href = "admin/user?opr=del&id=" + e.target.getAttribute("data-uid");
						})
						// if (confirm("确定删除吗？")) {
							
						// }
					}
					if (e.target.id === "hfID") {

						location.href = "admin/user?opr=shield&state=1&id=" + e.target.getAttribute("data-uid");

					}
					if (e.target.id === "shieldID") {
						layer.confirm("确定禁用该用户吗？", function () {
							location.href = "admin/user?opr=shield&state=-1&id=" + e.target.getAttribute("data-uid");
						})
						// if (confirm("确定禁用该用户吗？")) {
						// 	location.href = "admin/user?opr=shield&state=-1&id=" + e.target.getAttribute("data-uid");
						// }
					}
					if (e.target.id === "repShieldID") {

						location.href = "admin/user?opr=shield&&state=1&id=" + e.target.getAttribute("data-uid");

					}
				})
				if (${ seachUser.state == null }) {
				document.getElementById("state").value = "0";
			} else {
				document.getElementById("state").value = "${seachUser.state}";
			}
			// 页码下拉框初始化
			document.getElementById("pselect").value = "${pageBean.currPage}";
			// 页面数据量大小
			document.getElementById("usersize").value = "${pageBean.pageSize}";
    });

			function goPage(p) {
				document.getElementById("p").value = p;
				document.getElementById("searchFrom").submit();
			}

			function goPageSize(psize) {
				document.getElementById("pSize").value = psize;
				document.getElementById("searchFrom").submit();
			}
		</script>


		<style>
			#msg,
			#msgdiv {
				display: none;
			}

			/* 弹窗动画 */
			#msg {
				-webkit-animation: fadeleftIn .4s;
				animation: fadeleftIn .4s;
				-webkit-animation-name: popIn;
				animation-name: popIn;
			}

			@-webkit-keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					-webkit-transform: scale3d(1, 1, 1);
					transform: scale3d(1, 1, 1);
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}

			@keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					/* -webkit-transform: scale3d(1, 1, 1); */
					/* transform: scale3d(1, 1, 1); */
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}
		</style>
		<script>
			function show() {
				document.getElementById("msg").style.display = "block";
				document.getElementById("msgdiv").style.display = "block";
				$("#msgemail").text("*");
			}

			function nomsgDiv() {
				document.getElementById("msg").style.display = "none";
				document.getElementById("msgdiv").style.display = "none";
				$("#msgemail").text("*");
			}
		</script>
		<!-- 异步请求修改操作 -->
		<script>
			window.addEventListener("load", function () {
				document.getElementById("admin_right").addEventListener("click", function (e) {
					if (e.target.id == "updateUser" || e.target.id == "updateUserName") {
						// ajax异步请求刷新
						var xmlhttp = new XMLHttpRequest();
						xmlhttp.onreadystatechange = function (result) {
							if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
								var user = JSON.parse(xmlhttp.responseText)
								document.getElementById("upusername").value = user.username;
								document.getElementById("upemail").value = user.email;
								document.getElementById("uptime").valueAsDate = new Date(user.regTime);
								if (user.state === 1) {
									document.getElementById("upok").checked = true;
								} else if (user.state === -1) {
									document.getElementById("updisable").checked = true;
								} else if (user.state === 2) {
									document.getElementById("updel").checked = true;
								} else if (user.state === 3) {
									document.getElementById("upnoactive").checked = true;
								}
								document.getElementById("upimg").src = user.img;
								document.getElementById("upinteger").value = user.integral;
								document.getElementById("uid").value = user.id;
							}
						}
						// true开启异步刷新
						xmlhttp.open("GET", "admin/user?opr=updateSelect&id=" + e.target.getAttribute("data-uid"), true);
						xmlhttp.send();
						// 显示弹窗
						show();
					}
				})

			})
		</script>
		<script>
			function updateFromSubmit() {
				let datas = {
					opr: "update",
					integer: $("#upinteger").val(),
					times: $("#uptime").val(),
					state: $(".state:checked").val(),
					email: $("#upemail").val(),
					uid: $("#uid").val()
				}
				console.log(datas)
				$.ajax({
					type: "post",
					url: "admin/user",
					data: datas,
					dataType: "json",
					success: function (result) {
						if (result.msg == 'ok') {
							window.location.reload();
							layer.msg('修改成功', { icon: 1 });
						} else {
							layer.msg(result.msg, { icon: 2 });
						}
					},
					error: function () {
						layer.msg('系统繁忙，请稍后再试', { icon: 2 });
					}
				})
				
			}
		</script>
		<script>
			$("#upemail").blur(function () {
						if ($("#upemail").val() == '') {
							$("#msgemail").prop("style").color = "red";
							// $(this).prop("style").backgroundColor = "rgb(244, 169, 155)";
							$("#msgemail").text("邮箱不能为空");
						} else if ($("#upemail").val() != '') {

							$.ajax({
								type: "post",
								url: "/user",
								data: "opr=check&email=" + $("#upemail").val(),
								dataType: "json",
								success: function (msg, states, xhr) {
									if (msg.msg == 'ok') {
										$("#msgemail").prop("style").color = "rgb(18, 157, 81)";
										// $(this).prop("style").backgroundColor = "aquamarine";
										$("#msgemail").text("验证通过");
									} else {
										$("#msgemail").prop("style").color = "red";
										// $(this).prop("style").backgroundColor = "rgb(244, 169, 155)";
										$("#msgemail").text(msg.msg);
									}
								},
								error: function () {
									layer.msg('系统繁忙，请稍后再试', { icon: 2 });
								}
							})
						}
					});
		</script>

		</html>